import React, { useState, useEffect, useCallback } from "react";
import { Row, Col } from "antd";
import { Line } from "@ant-design/charts";
import "./style.scss";
import AMapLoader from "@amap/amap-jsapi-loader";
export default function DashBoard() {
  const data = [
    {
      item: "袜子",
      sale: 18,
    },
    {
      item: "鞋子",
      sale: 3,
    },
    {
      item: "裤子",
      sale: 55,
    },
    {
      item: "上衣",
      sale: 33,
    },
  ];
  // 地图实例
  const [map, setMap] = useState(null);
  // 初始化地图实例
  const initMap = useCallback(() => {
    AMapLoader.load({
      key: "3d3c9cf14d27c3fd04f467a6ca0ec098", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.PlaceSearch", "AMap.Weather"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
      const map = new AMap.Map("map", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 15, // 初始化地图级别
        center: [117.32, 31.7888], // 初始化地图中心点位置
      });

      // 使用图层  添加marker
      // 创建marker
      const marker = new AMap.Marker({
        position: [117.32, 31.7888],
        title: "你好啊",
        label: {
          content: "你好啊",
        },
      });
      map.add(marker);
      // 如何使用插件
      const placeSearch = new AMap.PlaceSearch({
        // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
        city: "合肥",
      });
      placeSearch.search("洗浴中心", (status: any, result: any) => {
        console.log(status);
        console.log(result);
      });
      var weather = new AMap.Weather();

      //执行实时天气信息查询
      weather.getLive("合肥", function (err, data) {
        console.log(err, data);
      });
      setMap(map);
    });
  }, [map]);

  useEffect(() => {
    initMap();
  }, []);
  return (
    <>
      <Row>
        <Col span={12}>
          <Line height={600} data={data} xField={"item"} yField={"sale"} />
        </Col>
        <Col span={12}>
          <div id="map">11</div>
        </Col>
      </Row>
    </>
  );
}
